﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>Smartflow-Sharp工作流程设计工具</title>
    <link href="./Content/layui/css/layui.css" rel="stylesheet" />
    <link href="./Content/design/smartflow.css" rel="stylesheet" />
    <script src="./Content/jquery.min.js"></script>
    <script src="./Content/design/svg.js"></script>
    <script src="./Content/layui/layui.all.js"></script>
    <script src="./Content/design/smartflow.js?v=111"></script>
    <script src="./Content/common.js"></script>
    <style type="text/css">
        .container_ctr {
            overflow: auto;
        }
        .container_draw {
            height: 4000px;
            width: 4000px;
        }
    </style>
</head>
<body>
    <div class="container_tools">
        <ul class="tools_menu clearfix" id="menus">
            <li command="save">
                <img src="./Content/design/images/save.png" />
            </li>
            <li command="select">
                <img src="./Content/design/images/select.png" />
            </li>
            <li command="join">
                <img src="./Content/design/images/line.png" />
            </li>
            <li command="node">
                <img src="./Content/design/images/node.png" />
            </li>
            <li command="decision">
                <img src="./Content/design/images/decision.png" />
            </li>
        </ul>
    </div>
    <div class="container container_right" id="attributes_tabs">
        <div class="attributes_tab" id="workflow_help">
            <table class="attribute_tab_table">
                <tr>
                    <td class="attribute_tab_table_column">方向</td>
                    <td class="attribute_tab_table_content">流程设计工具支持上下左右</td>
                </tr>
                <tr>
                    <td class="attribute_tab_table_column">规则</td>
                    <td class="attribute_tab_table_content">开始节点至少有一条出线，但没有进线、结束节点至少有一条进线，但没有出线，普通节点至少有一进一出的连线，决策节点至少有一条进线，两条以上出线</td>
                </tr>
                <tr>
                    <td class="attribute_tab_table_column">连线</td>
                    <td class="attribute_tab_table_content">先点击左边线条图标，然后选中节点，按下鼠标左键拖动到另一节点，然后再松手</td>
                </tr>
                <tr>
                    <td class="attribute_tab_table_column">折线</td>
                    <td class="attribute_tab_table_content">先连线，连线完成后，按住Ctrl+Shift键，然后鼠标双击线条，就会出圆点，可以随意拖动</td>
                </tr>
                <tr>
                    <td class="attribute_tab_table_column">移动</td>
                    <td class="attribute_tab_table_content">先点击左边鼠标箭头，然后选择节点元素，按下鼠标左键进行移动</td>
                </tr>
                <tr>
                    <td class="attribute_tab_table_column">编辑</td>
                    <td class="attribute_tab_table_content">鼠标双击元素，编辑右边面板</td>
                </tr>
                <tr>
                    <td class="attribute_tab_table_column">删除</td>
                    <td class="attribute_tab_table_content">按住键盘中Ctrl+Alt键，然后鼠标双击元素，元素就会被删除</td>
                </tr>
                <tr>
                    <td class="attribute_tab_table_column">模式</td>
                    <td class="attribute_tab_table_content">
                        支持单双向流程模式。单向即所有业务流转都由用户通过连线方式进行表述。双向即只要将所有节点都串联起来，由组件实现回退功能。默认配置为双向流程模式。
                    </td>
                </tr>
            </table>
        </div>
        <div class="attributes_tab attributes_tab_node hide" id="workflow_node">
            <fieldset class="layui-elem-field" lay-filter="attributes_node_info" id="attributes_node_info">
                <legend>基础信息</legend>
                <div class="layui-field-box">
                    <input type="text" placeholder="请输入节点名称" class="layui-input" id="node_name" />
                    <div class="smartflow_checkbox">
                        <input type="checkbox" id="node_cooperation" class="smartflow_checkbox_box" />
                        <label for="chkCooperation" class="smartflow_checkbox_label">是否会签</label>
                    </div>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field" lay-filter="attributes_decision_info" id="attributes_decision_info">
                <legend>基础信息</legend>
                <div class="layui-field-box">
                    <form class="layui-form" lay-filter="form_decision">
                        <div class="layui-form-item">
                            <select placeholder="请选择数据" class="layui-select" style="width:100%;" lay-filter="decision_select" id="decision_select"></select>
                        </div>
                        <div class="layui-form-item">
                            <textarea placeholder="请输入SQL脚本" class="layui-textarea" spellcheck="false" id="decision_script"></textarea>
                        </div>
                    </form>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field" lay-filter="attributes_decision_expression" id="attributes_decision_expression">
                <legend>表达式配置</legend>
                <div class="layui-field-box">
                    <div class="layui-form layui-form-pane" id="form_expression" lay-filter="form_expression">

                    </div>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field" lay-filter="attributes_role" id="attributes_role">
                <legend>角色配置</legend>
                <div class="layui-field-box">
                    <div class="layui-textarea" id="node_role"></div>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field" lay-filter="attributes_user" id="attributes_user">
                <legend>指定专人</legend>
                <div class="layui-field-box">
                    <div class="layui-textarea" id="node_user"></div>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field" lay-filter="attributes_config" id="attributes_config">
                <legend>自动义动作配置</legend>
                <div class="layui-field-box">
                    <div class="layui-textarea" id="node_action">

                    </div>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field" lay-filter="attributes_strategy" id="attributes_strategy">
                <legend>规则配置</legend>
                <div class="layui-field-box">
                    <div class="layui-form" lay-filter="form_rule" id="form_rule"></div>
                </div>
            </fieldset>
        </div>
        <div class="attributes_tab attributes_tab_node hide" id="workflow_transition">
            <fieldset class="layui-elem-field" lay-filter="attributes_line_info">
                <legend>基础信息</legend>
                <div class="layui-field-box">
                    <input type="text" placeholder="请输入线的名称" class="layui-input" id="transition_name" />
                </div>
            </fieldset>
        </div>
    </div>
    <div class="container_ctr">
        <div class="container_draw" id="drawing"></div>
    </div>
    <script type="text/html" id="smartflow_s_info">
        <form class="layui-form" lay-filter="layui_flow_info" style="margin:10px;margin-right:30px;">
            <input type="hidden" name="Status" />
            <div class="layui-form-item">
                <label class="layui-form-label">流程名称</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入流程名称" name="StructName" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">业务类型</label>
                <div class="layui-input-block">
                    <select placeholder="请选择" class="layui-select" name="CateCode" style="width:100%;" id="category_select" lay-filter="category_select">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" name="Memo" style="min-height:60px;"></textarea>
                </div>
            </div>
        </form>
    </script>

    
    <script type="text/html" id="common_expression">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">{{name}}</label>
            <div class="layui-input-block">
                <textarea name="{{id}}" class="layui-textarea">{{expression}}</textarea>
            </div>
        </div>
    </script>
    <script src="./Content/design/design.js"></script>
    <script type="text/javascript">
        $(function () {
            var setting = new design.Configuration({
                container: 'drawing',
                categoryUrl: 'api/category/get',
                categoryId: 'category_select',
                dataSourceUrl: 'api/setting/GetDatabaseSourceList',
                dataSourceId: 'decision_select',
                url: 'api/structure/get',
                save: 'api/structure/post',
                constraintId: 'form_rule',
                constraintUrl: 'api/setting/GetConstraint'
            });

            $("#menus li").click(function () {
                var command = $(this).attr("command");
                var instance = $.SMF.getComponentById('drawing');
                if (command === 'node' || command === 'decision') {
                    instance.create(command);
                } else {
                    if (instance[command]) {
                        instance[command]();
                    } else {
                        setting.save();
                    }
                }
            });
            $(".tools_menu img").mousedown(function () {
                $(this).css("border", "solid 1px #ad9d9d");
            });
            $(".tools_menu img").mouseup(function () {
                $(this).css("border", "none");
            });
        });
    </script>
</body>
</html>
